<template>
	<!-- 1为活动 2为文案  type 1方案 2 活动案例-->
	<view class="home">
		<navigator  open-type="navigateBack" class="goback">
			<u-icon name="arrow-left" color="#444" size="28" style="margin-right: 10rpx;"></u-icon>
			{{title}}
		</navigator>
		<view class="search">
			<view style="display: flex;align-items: center;justify-content: center; color: #ccc;width: 100%;height: 60rpx;"  v-if="!goSearch" @click="goSearch=true">
				<image src="/static/img/search.png" style="width: 35rpx; height: 35rpx;margin-right: 20rpx;" mode="aspectFit" />
				搜索
			</view>
			<u-input v-model="searchKeyWord" @blur="goSearch=false" v-if="goSearch" style="width: 80%;margin: auto;" placeholder="请输入关键词"  type="text" :border="false" />
		</view>
		<view class="itemArr">
				<titleRow :titleName="titleName1"></titleRow>
				<view class="item" v-for="(item,index) in list" :key="index" @click="goDetail(1,item.id)">
					<image v-if="index==1 || index ==0" src="/static/img/new.png" mode="aspectFit" />
					<view class="time">{{item.ctime}}</view>
					<view class="itemContent">
						<text>{{item.title}}</text>
						<u-icon name="arrow-right" color="#444" size="28" style="margin-right: 10rpx;"></u-icon>
					</view>
				</view>
				<view  @click="goMore(1)" class="moreBtn">
					<text>查看全部</text>
					<u-icon name="arrow-down" color="#888" size="28" style="margin-left: 10rpx;"></u-icon>
				</view>
		</view>
		
		<view class="itemArr">
				<titleRow :titleName="titleName2"></titleRow>
				<view class="item" v-for="(item,index) in shareList" :key="index" @click="goDetail(2,item.id)">
					<image v-if="index==1 || index ==0" src="/static/img/new.png" mode="aspectFit" />
					<view class="time">{{item.ctime}}</view>
					<view class="itemContent">
						<text>{{item.title}}</text>
						<u-icon name="arrow-right" color="#444" size="28" style="margin-right: 10rpx;"></u-icon>
					</view>
				</view>
				<view @click="goMore(2)" class="moreBtn">
					<text>查看全部</text>
					<u-icon name="arrow-down" color="#888" size="28" style="margin-left: 10rpx;"></u-icon>
				</view>
		</view>
		
	</view>
</template>


<script>
	import titleRow from '@/component/titleRow/titleRow.vue'

	export default {
		data() {
			return {
				title : '',
				index : '',
				searchKeyWord:'',
				goSearch:false,
				// 活动
				searchParams1:{
					page:'1',
					pagesize:'10,',
					act_type:'2'
				},
				// 活动案例
				searchParams2:{
					page:'1',
					pagesize:'10,',
					act_type:'1'
				},
				list:[],
				shareList:[],
			};
		},
		computed:{
			
			titleName1(){
				return `${this.title}方案（253）`
			},
			titleName2(){
				return `${this.title}案例分享（253）`
			}
		},
		methods:{
			goMore(_type){
				console.log(_type);
				uni.navigateTo({
					url:`../allActiveAndDocument/allActiveAndDocument?index=${this.index}&type=${_type}`
				})
			},
			goDetail(_type,_id){
				console.log(_type);
				uni.navigateTo({
					url:`../activeAndDocumentDetail/activeAndDocumentDetail?index=${this.index}&type=${_type}&id=${_id}`
				})
			},
			async getList(_type){
				let data = _type== 1 ? this.searchParams1 : this.searchParams2
				let res = await this.myhttp({
					url:'api/xlaction/action_list',
					data
				})
				console.log(res)
				if( _type== 1){
					this.list = res.data.data.data
					console.log(this.list);
				}else if( _type== 2){
					this.shareList = res.data.data.data
					console.log(this.shareList);
				}
			},
		},
		onLoad(option) {
			this.index = option.index
			option.index==1 ? this.title = '活动' : this.title = '文案'
			if(this.index==1){
				this.getList(1)
				this.getList(2)
			}
		},
		components:{
			titleRow,
		}
	}
</script>

<style lang="scss" scoped>
.home {
	padding: 10rpx 20rpx;
  .goback {
	height: 70rpx;
	display: flex;
	align-items: center;
	
	color: #444444;
  }

  .search {
	height: 80rpx;
	background: #FFFFFF;
	box-shadow: 0px 1px 10px rgba(221, 221, 221, 0.5);
	border-radius: 28rpx;
	display: grid;
	place-items: center;
	margin-bottom: 15rpx;
  }

	.itemArr .item:last-child  {
		  // background-color: pink;
	}

  .itemArr {
    titlerow {
    }
	
    .item {
		margin-bottom: 20rpx;
		box-sizing: content-box;
		padding: 0 35rpx;
		position: relative;
		background-color: #F9FAFB;
		height: 174rpx;
		border-radius: 8rpx;
	  image{
		  position: absolute;
		  top: 0;
		  right: 0;
		  width: 100rpx;
		  height: 100rpx;
	   }
      .time {
		color: #888888;
		height: 87rpx;
		display: flex;
		align-items: center;
      }

      .itemContent {
		  border-top: 2rpx solid #EEEEEE;
		  display: flex;
		  align-items: center;
		  justify-content: space-between;
		  align-items: center;
		  height: 86rpx;
        text {

        }

       
      }
    }
  
	.moreBtn{
		margin-top: -20rpx;
		height: 90rpx;
		display: flex;
		justify-content: center;
		align-items: center;
		color: #888888;
	}

  }
}
</style>
